/*
  学习目标：useEffect - 第二个参数， 模拟声明周期
  语法： useEffect(回调函数， [])   useEffect(回调函数， [依赖项])
  
*/
import React, { useEffect, useState } from 'react';

export default function App() {
  const [isShow, setIsShow] = useState(true);

  return (
    <div>
      <button
        onClick={() => {
          setIsShow(!isShow);
        }}
      >
        点我+1
      </button>
      {isShow && <Child></Child>}
    </div>
  );
}

function Child() {
  const [count, setCount] = useState(0);

  // 语法： []空数组
  // 1. 挂载后
  // 2. 第一个参数为 [], 代表挂载后，等同于componentDidMount
  useEffect(() => {
    // console.log('挂载后只执行一次  ----->  ');
  }, []);

  // 语法： [依赖项]
  // 1. 挂载后， 更新后二合一， 等同于componentDidMount + componentDidUpdate
  // 2. 理解： 类似vue中的watch，开启了immediately
  useEffect(() => {
    console.log('count更新了  ----->  ', count);
  }, [count]);
  return (
    <h1>
      Child
      <button onClick={() => setCount(count + 1)}>点我+1</button>
    </h1>
  );
}
